<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>hi</title>
    <script src="js/jquery.js"></script>
    <script>function goLoginPage() {
        location.href = "index.html"
    }

    //ajks
    function registerAjax() {
        //获取用户的用户名，密码。。。。。js的写法
        /*  var username = document.getElementById("username").value;
          var password = document.getElementById("password").value;
          var username = document.getElementById("username").value;
          var username = document.getElementById("username").value;*/
        //jquery的写法
        var username1 = $("#username").val();
        var password1 = $("#password").val();
        var nickname1 = $("#nickname").val();
        var email1 = $("#email").val();
        var sex1 = $("[name='sex']:checked").val();
        //客户端的参数校验
        if (username1 == null || username1.trim() == " ") {
            alert("账号不能为空")
            return;//return就不往下执行了
        }
        if (password1 == null || password1.trim() == " ") {
            alert("密码不能为空")
            return;//return就不往下执行了
        }
        if (nickname1 == null || nickname1.trim() == " ") {
            alert("昵称不能为空")
            return;//return就不往下执行了
        }
        if (email1 == null || email1.trim() == " ") {
            alert("email不能为空")
            return;//return就不往下执行了
        }
        /*  alert(username1 ,password1,nickname1,email1,sex1);*/

        //发送ajax
        $.ajax({
            type: "POST",
            url: "http://localhost:8080/user/register",
            data: {
                username: username1,
                password: password1,
                nickname: nickname1,
                email: email1,
                sex: sex1

            },
            success: function (data) {
                //服务器返回的结果
                if (data == 1) {
                    alert("注册成功")
                    //自动
                    location.href = "index.html";
                } else if (data == -1) {
                    alert("用户已存在")
                } else if (data == -2) {
                    alert("邮箱已被注册")
                }
            }
        })
    }</script>
</head>
<style>

    .body_class {
        background-image: url("img/img_2.png");
        height: 100%;
        background-size: 100%;
        display: flex;
        flex-direction: row;
        align-items: center; /*纵向居中*/
        justify-content: center; /*横向居中*/
        background-color: blanchedalmond;
    }

    .hi_div {
        vertical-align: middle;
        /*border: cyan 1px solid;*/
        height: 350px;
        width: 300px;
        border-radius: 10px;
        margin-right: 50px;

    }

    .menu_div {
        margin-top: 20px;
        margin-left: 25px;
        flex-direction: row;
        align-items: center; /*纵向居中*/
        justify-content: center; /*横向居中*/
    }

    .h3_div {
        font-family: 楷体;
        color: firebrick;
        font-size: 30px;
    }
</style>
<body class="body_class">
<div class="hi_div">
    <h3 align="center" class="h3_div">澳门五子棋娱乐城</h3>

    <div class="menu_div">
        用户名：<input id="username" placeholder="请输入用户名"><br>
    </div>
    <div class="menu_div">
        密码：<input style="margin-left: 15px" id="password" type="password" placeholder="请输入密码"><br>
    </div>
    <div class="menu_div">
        昵称：<input style="margin-left: 15px" id="nickname" placeholder="昵称"><br>
    </div>
    <div class="menu_div">
        email：<input style="margin-left: 7px" id="email" placeholder="请输入邮箱"><br>
    </div>
    <div class="menu_div">
        性别：
        <input style="margin-left: 5px" name="sex" type="radio" value="0" checked>男
        <input name="sex" type="radio" value="1">女
    </div>

    <div class="menu_div">
        <button onclick="goLoginPage()" style="margin-left: 40px">登录</button>
        <button onclick="registerAjax()" style="margin-left: 40px">注册</button>
    </div>

</div>
</body>
</html>
